<template>
  <view class="shop_box">
    <view class="shop_list_item">
      <view v-if="items.logo" class="shop_logo_box">
        <view v-if="items.is_hot === 1" class="shop_quality">品质</view>
        <view v-if="items.is_new_shop === 1" class="shop_new">新店</view>
        <image :src="items.logo" class="shop_logo_img"  style="width: 140rpx;height: 140rpx;object-fit: cover;"></image>
        <image style="position: absolute;top: 0;left: 0;width: 56rpx;height: 32rpx;border-radius: 0"
               :src="BaseImgUrl+'/shop/pz_shop.png'" v-if="items.is_hot === 1"></image>
        <image style="position: absolute;top: 0;left: 0;width: 56rpx;height: 32rpx;border-radius: 0"
               :src="BaseImgUrl+'/shop/new_shop.png'" v-if="items.is_new_shop === 1"></image>
      </view>
      <image v-else
             src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
             style="border-radius: 20rpx;"></image>
      <view class="shop_info">
        <view class="shop_mingzi">
          <view :class="items.count == 0?'width':''" class="shop_name ellipsis-one-line">{{ items.name }}</view>
        </view>
        <view class="yysjandejuli_box">
          <view class="yysj_text">
            <view v-if="items.type == 1" class="yysj_text_platform"><image :src="BaseImgUrl + '/home/meituan_icon.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>美团</view>
            <view v-if="items.type == 2" class="yysj_text_platform"><image :src="BaseImgUrl + '/home/elm_icon.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>饿了么</view>
            <view v-if="items.type == 3" class="yysj_text_platform"><image :src="BaseImgUrl + '/home/jd_icon.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>京东</view>
            <view class="yysj_text_time">{{ getOpenAndCloseTime() }}可抢</view>
          </view>
          <view class="shop_juli">距您：{{ items.distance }}km</view>
        </view>
        <view v-if="items.activity.length > 1" class="activityNum">
          <view class="activityNum_text">共{{ items.activity.length }}个活动</view>
        </view>
        <!--单个活动返现 -->
        <view v-else class="single_activity">
          <view class="single_activity_item cashback_box">
            <view class="activityNum_back">{{prop.newUser=='新用户'?'新人全额返':'返'}}</view>
            <view v-if="prop.newUser == '新用户'" class="cashback_text">
              {{ '满' + twoFixed(items.activity[0].minimum_amount) + '返' + twoFixed(items.activity[0].minimum_amount) }}
            </view>
            <view v-if="prop.newUser == '老用户'" class="cashback_text">
              {{ '满' + twoFixed(items.activity[0].minimum_amount) + '返'}}
              {{ userInfo?.is_member === 0 ? twoFixed(items.activity[0].rebate_amount) : twoFixed(items.activity[0].member_rebate_amount)}}
            </view>
          </view>
          <view v-if="items.activity[0].is_hot_card === 1" class="activityNum_quality">品质专享</view>
          <view v-if="items.activity[0].is_comment === 2" class="activityNum_evaluate">无需评价</view>
        </view>
      </view>
    </view>
    <!--多个活动返现-->
    <view v-for="(aitem, aindex) in items.activity" :key="aindex" class="active_box"
          @click="handleShopDetailActive(items,aitem,aindex)">
      <!--活动模块  -->
      <view v-if="items.activity.length > 1" class="a_title">
        <text class="activity_num">活动{{ aindex + 1 }}</text>
        <view class="cashback_box">
          <view class="activityNum_back">{{prop.newUser=='新用户'?'新人全额返':'返'}}</view>
          <view v-if="prop.newUser == '新用户'" class="cashback_text">
            {{ '满' + twoFixed(aitem.minimum_amount) + '返' + twoFixed(aitem.minimum_amount) }}
          </view>
          <view v-if="prop.newUser == '老用户'" class="cashback_text">
            {{ '满' + twoFixed(aitem.minimum_amount) + '返' }}
            {{ userInfo?.is_member === 0 ? twoFixed(aitem.rebate_amount) :twoFixed(aitem.member_rebate_amount) }}
          </view>
        </view>
        <text v-if="aitem.is_hot_card === 1 && aitem.is_comment !== 2" class="activityNum_quality">品质专享</text>
        <view v-if="aitem.is_comment == 2" :class="aitem.day_num<=aitem.total_count?'hui':''" class="activityNum_evaluate">无需评价</view>
      </view>
      <view class="active_btns">
        <view class="left_box">
          <view class="progress_box">
            <u-line-progress :percentage="aitem?.percent" :showText="false" activeColor="#FF5429" inactiveColor="#FDE0BF" height="8">
              <view>
                <image :src="BaseImgUrl + '/home/progress_icon01.png'" mode="widthFix" style="width: 24rpx;height: 24rpx;"></image>
              </view>
            </u-line-progress>
            <!--<progress :percent="aitem?.percent"
                      border-radius="100"
                      duration="16"
                      stroke-width="8"
                      activeColor="#FF4E2C"
                      backgroundColor="#FDEBD8"
                      active="true">
            </progress>-->
          </view>
          <text style="font-size:24rpx;color: #888888;">还剩<text class="val_num">{{ aitem.day_num - aitem.total_count }}</text>份</text>
          <!--<view :class="aitem.day_num<=aitem.total_count?'hui':''" class="money">
            {{
              aitem.minimum_amount == 0
                  ? '最高返' + (aitem.member_rebate_amount.split('.')[1] !== '00' ? aitem.member_rebate_amount : aitem.member_rebate_amount.split('.')[0])
                  : '满' + (aitem.minimum_amount.split('.')[1] !== '00' ? aitem.minimum_amount : aitem.minimum_amount.split('.')[0])
                  + '返' + (aitem.member_rebate_amount.split('.')[1] !== '00' ? aitem.member_rebate_amount : aitem.member_rebate_amount.split('.')[0])
            }}
          </view>-->

        </view>
        <view class="right_box">
          <view v-if="aitem.is_work==1" class="bl_box">
            <!--<text class="val_num">剩{{ aitem.percent }}%</text>-->


          </view>
          <view v-if="aitem.day_num > aitem.total_count && aitem.is_work==0" style="text-align: right;">
            <text class="time_text">{{ aitem.order_open_time }}</text>
          </view>
          <view v-if="aitem.day_num > aitem.total_count && aitem.is_work == 1" class="btn qd_btn">立即报名</view>
          <view v-if="aitem.day_num <= aitem.total_count" class="btn sq_btn">已售罄</view>
          <view v-if="aitem.day_num > aitem.total_count && aitem.is_work == 0" class="btn qd_btn opacity">待开抢</view>
        </view>
      </view>
      <view v-if="aindex < items.activity.length - 1" class="activity_line">
        <view class="activity_line_left"></view>
        <u-line color="#D8D8D8" hairline dashed margin="10rpx 0"></u-line>
        <view class="activity_line_right"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted, watch} from "vue";
import {conUtils} from "../../utils/conUtils";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {compareTime, letTime} from "../../utils/date";
import {BaseImgUrl} from "../../utils/lshttp";
import {wechatAppletLoginAPI} from "../../services/login";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
const { twoFixed } = useCommonInfoStore() // 使用commonInfoStore状态管理器
const userInfoStore = useUserInfoStore()
const userInfo = ref()
// console.log('userInfo', userInfoStore.userInfo)
const prop = defineProps({
  items: {
    type: Object
  },
  newUser: {
    type: String,
  }
})

onMounted(() => {
  userInfo.value = userInfoStore.userInfo
  // console.log('newUser', prop.newUser, userInfoStore.isNewUser)
})
watch( () => userInfoStore.userInfo, (newValue) => {
  userInfo.value = userInfoStore.userInfo
  // console.log('userInfo========',newValue)
})
// 保留两位小数，小数点后面是0不显示
/* const twoFixed = (num) => {
  return Number(num).toFixed(2).replace(/\.00$/, '')
} */
const getOpenAndCloseTime = () => {
  const itemAll = prop.items.activity
  let openTime = ''
  let closeTime = ''

  // console.log("getOpenAndCloseTime===", prop.items.name)
  itemAll.forEach((item) => {
    // console.log("---------------------------------------")
    let startTempTime1 = item.am_start_time // 早上开始时间
    let startTempTime2 = item.pm_start_time  // 下午开始是时间
    let startResult = letTime(startTempTime1, startTempTime2) // 早上开始和下午开始时间对比
    if (startResult === "00:00:00") {
      startResult = startTempTime2
    }
    // console.log("startTempTime1===", startTempTime1)
    // console.log("startTempTime2===", startTempTime2)
    // console.log("startResult===", startResult)
    if (openTime) {
      openTime = letTime(openTime, startResult)
    } else {
      openTime = startResult
    }
    // console.log("openTime===>>>>>>>>>", openTime)

    let endTempTime1 = item.am_end_time // 早上结束时间
    let endTempTime2 = item.pm_end_time // 下午结束时间
    let endResult = compareTime(endTempTime1, endTempTime2)  // 早上结束和下午结束时间对比
    // console.log("endTempTime1===", endTempTime1)
    // console.log("endTempTime2===", endTempTime2)
    // console.log("endResult===", endResult)
    if (closeTime) {
      closeTime = compareTime(closeTime, endResult)
    } else {
      closeTime = endResult
    }
    // console.log("closeTime===>>>>>>>>>", closeTime)
  })
  // console.log("getOpenAndCloseTime===", prop.items.name)
  return openTime + '-' + closeTime
}
const getCloseTime = () => {
  const itemAll = prop.items.activity
  let openTime = itemAll[0]
  itemAll.forEach((item) => {
    let star_time = 0
    if (item.pm_start_time === item.pm_end_time) {

    }
  })
  return prop.items.close_time
}
const handleShopDetailActive = (item, aitem, Index) => {
  /*uni.login({
    provider: 'weixin',
    success: async function (login_res) {
      uni.hideLoading()
      // conUtils("getUserProfile", userInfos)
      // conUtils("login", login_res)
      const res = await wechatAppletLoginAPI(login_res.code,)
      // conUtils('res.result.token', res.result.token)
      await setInfo(res, type)
    },
  })*/
  if (userInfoStore.isLogin()) {
    conUtils("111111111111111", aitem)
    if (aitem.day_num <= aitem.total_count) {
      uni.showToast({
        title: '已售罄',
        icon: 'none'
      })
      return
    }
    if (aitem.is_work === 0) {
      uni.showToast({
        title: aitem.order_open_time,
        icon: 'none'
      })
      return
    }
    uni.navigateTo({
      url: '/pages_shopdetail/shopdetail?id=' + item.id + '&activityId=' + aitem.id + "&newUser=" + prop.newUser
    })
  }
}
</script>

<style>
page {
  font-family: system-ui;
}
</style>

<style lang="scss" scoped>
/* 店铺列表css start */
.home_shop_box{
  box-sizing: border-box;
  padding: 0 20rpx;
  position: relative
}
.shops_list {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 0 0 20rpx;
  .shop_box{
    width: 100%;
  }
}
/* 店铺列表店铺信息css */
.shop_list_item {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx 20rpx;
  display: flex;
  position: relative;

  .shop_logo_box {
    position: relative;
    width: 128rpx;
    height: 128rpx;
    overflow: hidden;
    border-radius: 16rpx;

    .shop_quality {
      width: 72rpx;
      height: 36rpx;
      line-height: 36rpx;
      font-size: 24rpx;
      color: #FFDC7A;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      border-radius: 16rpx 0 10rpx 0;
      background: linear-gradient(270deg, #59392C 0%, #161410 100%);
    }

    .shop_new {
      width: 72rpx;
      height: 36rpx;
      line-height: 36rpx;
      font-size: 24rpx;
      color: #FFFFFF;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      border-radius: 16rpx 0 10rpx 0;
      background: linear-gradient(270deg, #05AC2C 0%, #1EAC44 96%);
    }

    .shop_logo_img {
      border-radius: 16rpx;
    }
  }

  .shop_info {
    flex: 1;
    padding-left: 20rpx;

    .shop_mingzi {
      .shop_name {
        font-weight: 400;
        flex: 1;
        font-size: 28rpx;
        color: #0A0A0A;
        height: 40rpx;
        line-height: 40rpx;
      }

      .shop_type {
        background-color: #FECC32;
        color: #333333;
        border-radius: 8rpx;
        font-size: 24rpx;
        text-align: center;
        padding: 0 6rpx;
        height: 36rpx;
        line-height: 36rpx;
      }

      .shop_type3 {
        background-color: #db2727;
        color: #FFFFFF;
        border-radius: 8rpx;
        font-size: 24rpx;
        text-align: center;
        padding: 0 6rpx;
        height: 36rpx;
        line-height: 36rpx;
      }

      .elemtag {
        background-color: #17aeff;
        color: #ffffff;
        border-radius: 8rpx;
        font-size: 24rpx;
        text-align: center;
        padding: 0 6rpx;
        height: 36rpx;
        line-height: 36rpx;
      }

      .shop_juli {
        color: #666666;
        font-size: 24rpx;
        text-align: right;
      }
    }

    /* 平台、距离 */

    .yysjandejuli_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      padding-bottom: 8rpx;

      .yysj_text {
        border-radius: 8rpx;
        padding: 8rpx 13rpx 8rpx 0;
        font-size: 24rpx;
        text-align: center;
        color: #888888;
        display: flex;
        align-items: center;

        .yysj_text_platform {
          display: flex;
          align-items: center;
        }

        .yysj_text_time {
          padding-left: 10rpx;
        }
      }

      .shop_juli {
        color: #888888;
        font-size: 24rpx;
        text-align: right;
      }

    }

    /* 活动数量css */

    .activityNum {
      width: 120rpx;
      height: 40rpx;

      .activityNum_text {
        font-size: 22rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        color: #FF700C;
        border: 2rpx solid #FD7C22;
        border-radius: 8rpx;
      }
    }

    /* 单个活动css */

    .single_activity {
      display: flex;
      align-items: center;

      .single_activity_item {
      }
    }

    .shop_yuliang {
      display: flex;
      align-items: center;
      margin-top: -10rpx;

      .jindutiao {
        flex: 1;
        margin-top: -18rpx;
      }

      .shengyu {
        padding-left: 20rpx;
        color: #FF6433;
        font-size: 24rpx;
      }
    }
  }
}
// 活动满返公共css
.cashback_box {
  height: 36rpx;
  line-height: 36rpx;
  padding: 2rpx 2rpx 2rpx 10rpx;
  background: #FD7C22;
  border-radius: 8rpx;
  display: flex;
  align-items: center;

  .activityNum_back {
    color: #FFFFFF;
    padding-right: 10rpx;
    font-size: 24rpx;
  }

  .cashback_text {
    font-size: 22rpx;
    color: #FD7C22;
    padding: 0 10rpx;
    background: #FFFFFF;
    border-radius: 0 8rpx 8rpx 0;
  }
}
/* 品质专享 */
.activityNum_quality{
  width: 120rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #FFD11A;
  text-align: center;
  background: linear-gradient( 270deg, #9D561B 0%, #161410 100%);
  border-radius: 8rpx;
  margin-left: 12rpx;
}
/* 无需评价 */
.activityNum_evaluate{
  width: 116rpx;
  height: 36rpx;
  line-height: 36rpx;
  font-size: 24rpx;
  color: #2DB327;
  text-align: center;
  background: #F5FFF5;
  border-radius: 8rpx;
  border: 2rpx solid #74D87F;
  margin-left: 12rpx;
}
/* 官返最高返 */
.activityNum_max{
  height: 36rpx;
  line-height: 36rpx;
  font-size: 24rpx;
  color: #FD7C22;
  padding: 0 10rpx;
  background: #FFFFFF;
  border: 2rpx solid #FD7C22;
  border-radius: 8rpx;
}
/* 店铺活动css */
.active_box {
  border-radius: 10rpx;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 20rpx;

  .a_title {
    font-size: 22rpx;
    color: #666;
    padding: 0 20rpx;
    border-radius: 3px;
    position: relative;
    display: flex;
    align-items: center;
    .activity_num {
      width: 100rpx;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 24rpx;
      text-align: center;
      color: #3D3D3D;
      box-sizing: border-box;
      margin-right: 10rpx;
      background: #F4F4F4;
      border-radius: 8rpx;
    }
    .activityNum_item{
      font-size: 24rpx;
      line-height: 34rpx;
    }
    .activityNum_new{
      color: #FFFFFF;
      text-align: center;
      padding: 6rpx 10rpx;
      background: #FD7C22;
      border-radius: 8rpx 0 0 8rpx;
      margin-left: 10rpx;
    }
    .activityNum_cashback{
      color: #FD7C22;
      text-align: center;
      padding: 4rpx 10rpx;
      background: #FFFFFF;
      border: 2rpx solid #FD7C22;
      border-radius: 0 8rpx 8rpx 0;
      box-sizing: border-box;
    }
    /* 品质专享 */
    .Quality_exclusive{
      background: linear-gradient( 270deg, #59392C 0%, #161410 99%);
      color: #FFDC7A;
      border-radius: 6rpx;
      padding: 8rpx 12rpx;
      border: 2rpx solid #F9DD91;
      font-size: 22rpx;
      margin-left: 10rpx;
      position: relative;
      z-index: 11;
    }
    .pj_text {
      border: 1px solid #45E2BE;
      background: #EBFEF9;
      border-radius: 6px;
      color: #07AA83;
      box-sizing: border-box;
      padding: 8rpx 10rpx;
      font-size: 22rpx;
      margin-left: 10rpx;
      display: inline-block;
      position: relative;
      z-index: 11;
      &.hui {
        background: #EFEFEF;
        border: 1px solid #DEDEDE;
        color: #666;
      }
    }
    /* &:after {
      content: '';
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 2rpx;
      background-color: #EEE;
    } */
  }

  .active_btns {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    padding: 0 20rpx;
    .left_box {
      display: flex;
      align-items: center;

      .money {
        background: #FFF7EF;
        border: 1px solid #FFBC7E;
        border-radius: 3px;
        padding: 0 10rpx;
        font-size: 24rpx;
        color: #FF7900;
        height: 40rpx;
        line-height: 40rpx;

        &.hui {
          background: #FFFFFF;
          border: 1px solid #C8C8C8;
          color: #C8C8C8;
        }
      }
      .progress_box{
        width: 158rpx;border-radius: 20rpx;
        // overflow: hidden;
        box-sizing: border-box;
        padding-right: 10rpx;
      }
      .val_num {
        font-size: 22rpx;
        color: #FF5429;
        margin-top: -2px;
        width: 86rpx;
      }
    }

    .right_box {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .btn {
        border-radius: 36rpx;
        font-size: 24rpx;
        color: #fff;
        font-weight: bold;
        margin-left: 10rpx;
        height: 25px;
        line-height: 25px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20rpx;

        &.qd_btn {
          background: linear-gradient( 270deg, #FF8312 0%, #FF4E2C 100%);

          /* &:before {
            content: '';
            display: inline-block;
            width: 20rpx;
            height: 30rpx;
            background: url('https://lsz.lszbg.com/imgs/images/sd_icon.png') no-repeat center center / 100% 100%;
            margin-right: 5rpx;
          } */
        }

        &.opacity {
          opacity: .7;
          font-weight: normal;

          &:before {
            display: none;
          }
        }

        &.sq_btn {
          background: linear-gradient(to left, #BFBFBF, #C8C8C8);
        }
      }
    }
  }
  /* 虚线css */
  .activity_line{
    height: 30rpx;
    padding: 26rpx 14rpx 0;
    position: relative;
    .activity_line_left{
      width: 28rpx;
      height: 28rpx;
      background: #f4f4f4;
      border-radius: 50%;
      position: absolute;
      left: -14rpx;
      top: 20rpx;
    }
    .activity_line_right{
      width: 28rpx;
      height: 28rpx;
      background: #f4f4f4;
      border-radius: 50%;
      position: absolute;
      right: -14rpx;
      top: 20rpx;
    }
  }
  .active_con {
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx;
    align-items: center;
    background: url('https://lsz.lszbg.com/imgs/old/bg_order.png') no-repeat center center / 100% 100%;
    flex: 1;

    &.hui {
      background: url('https://lsz.lszbg.com/imgs/old/bg_order_hui.png') no-repeat center center / 100% 100%;

      .left_a {
        display: flex;
        align-items: center;

        .j_money {
          font-weight: bold;
          margin-right: 20rpx;

          .icon {
            font-size: 28rpx;
            color: #888;
          }

          .val {
            font-size: 48rpx;
            color: #888;
          }
        }

        .vip_no_yes {
          .yes_vip {
            font-size: 24rpx;
            color: #888;
            font-weight: bold;
          }

          .no_vip {
            font-size: 20rpx;
            color: #888;
            margin-top: 5rpx;
          }
        }
      }
    }

    &.opcity {
      opacity: .7;
    }

    .left_a {
      display: flex;
      align-items: center;

      .j_money {
        font-weight: bold;
        margin-right: 20rpx;

        .icon {
          font-size: 28rpx;
          color: #FE874B;
        }

        .val {
          font-size: 48rpx;
          color: #FE5414;
        }
      }

      .vip_no_yes {
        .yes_vip {
          font-size: 24rpx;
          color: #FE5414;
          font-weight: bold;
        }

        .no_vip {
          font-size: 20rpx;
          color: #FE5414;
          margin-top: 5rpx;
        }
      }
    }

    .right_a {
      width: 50%;
      position: relative;

      .r_con {
        position: relative;
        z-index: 111;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        right: -36rpx;

        .lj_qd {
          font-size: 24rpx;
          color: #fff;
          margin-bottom: 10rpx;
        }

      }
    }
  }
}

/* 店铺列表css end */


.bl_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4rpx;



}
.time_text {
  color: #FC7532;
  font-size: 22rpx;
}
.pt_hot {
  font-size: 22rpx;
  background-color: rgba(255, 220, 37, 0.88);
  color: black;
  font-weight: bold;
  padding: 6rpx 8rpx;
}
</style>
